import React, { ReactElement, useEffect, useState } from 'react';
import { Animated, View } from 'react-native';

import Button from '../../../../components/Button';
import { phonePx } from '../../../../util/adapt';
import { setRecording, startSendRecord } from '../../actions';
import styles from './style';

export default (): ReactElement => {
  const [width] = useState(new Animated.Value(phonePx(96)));

  useEffect((): (() => void) => {
    const timer = Animated.loop(
      Animated.sequence([
        Animated.timing(width, {
          toValue: phonePx(120),
          duration: 700
        }),
        Animated.timing(width, {
          toValue: phonePx(96),
          duration: 700
        })
      ])
    );
    timer.start();
    return (): void => {
      timer.stop();
    };
  }, [width]);

  return (
    <View style={styles.startContent}>
      <Animated.View style={[styles.record, { width, height: width }]}>
        <Button
          style={styles.notRecordContent}
          onPress={(): void => {
            setRecording(false);
            startSendRecord();
          }}
        >
          <View style={styles.square} />
        </Button>
      </Animated.View>
    </View>
  );
};
